<template>
    <van-tabbar
      v-model="active"
      active-color="#07c160"
      inactive-color="#000"
    >
      <van-tabbar-item to="/home"  icon="newspaper-o">电影</van-tabbar-item>
      <van-tabbar-item to="/movie" icon="coupon-o">影院</van-tabbar-item>
      <van-tabbar-item to="/music" icon="music-o">音乐</van-tabbar-item>
      <van-tabbar-item to="/my"    icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
</template>
<script>
  export default {
    name: 'tabbar',
    data(){
      return{
        active: null,
      }
    },
    created(){
      // 设置底部当前路由导航高亮
      if(this.$route.path.indexOf('home') !==-1){
        this.active = 0;
        //进入home页面  展示正在热映
        sessionStorage.thisActive = 1;
      }
      else if(this.$route.path.indexOf('movie') !==-1){
        this.active = 1;
      }
      else if(this.$route.path.indexOf('music') !==-1){
        this.active = 2;
      }
      else if(this.$route.path.indexOf('my') !==-1){
        this.active = 3;
      }

    },
    watch:{
      $route(to,from){//因为keep-alive影响导致不能实时获取路由
        // 设置底部当前路由导航高亮
        if(to.path.indexOf('home') !==-1){
          this.active = 0;
          //进入home页面  展示正在热映
          sessionStorage.thisActive = 1;
        }
        else if(to.path.indexOf('movie') !==-1){
          this.active = 1;
        }
         else if(this.$route.path.indexOf('music') !==-1){
        this.active = 2;
      }
        else if(to.path.indexOf('my') !==-1){
          this.active = 3;
        }
      }
    },
    methods:{
    }
  }
</script>
<style scoped lang="less">
  van-tabbar{
    position: fixed;
    bottom: 0;
  }
</style>
